<template>
  <div class="nation">
    <!-- 顶部 -->
    <div class="nation_top">
      <!-- 日期选择器 -->
      <el-select
        v-model="dateValue_Select"
        class="m-2"
        placeholder="选择日期"
        size="default"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- 时间选择器 -->
      <el-time-select
        v-model="timeValue_select"
        start="08:30"
        step="00:15"
        end="18:30"
        placeholder="Select time"
      />
    </div>

    <!-- 数据概况+echarts图表 -->
    <div class="nation_tu">
      <!--为echarts准备一个具备大小的容器dom-->
      <div id="main" style="width: 1300px; height: 400px"></div>
    </div>
    <!-- 导出图表 -->
    <div class="nation_out">
      <el-button>导出</el-button>
    </div>
    <!-- table图表 -->
    <div class="nation_table">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="date" label="数据类型" />
        <el-table-column prop="name" label="新增居民数量" />
        <el-table-column prop="address" label="新增签约量" />
        <el-table-column prop="serve" label="新增服务量" />
        <el-table-column prop="sum" label="合计" />
      </el-table>
    </div>

    <!-- 三个环形图 -->
    <div class="nation_huan">
      <ul>
        <li>
          <huan1 />
        </li>
        <li>
          <huan2 />
        </li>
        <li>
          <huan3 />
        </li>
      </ul>
    </div>

    <!-- 最底部两个echarts图 -->
    <div class="nation_two">
      <div class="two_left">
        <progress_echarts />
      </div>
      <div class="two_right">
        <bottom_bar />
      </div>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref, onMounted } from "vue";
// 引入echarts
import * as echarts from "echarts";
// 1：引入需要注册的组件，无需注册
import huan1 from "../../../components/Statisticsdata_echarts/huan1.vue";
import huan2 from "../../../components/Statisticsdata_echarts/huan2.vue";
import huan3 from "../../../components/Statisticsdata_echarts/huan3.vue";
import progress_echarts from "../../../components/Statisticsdata_echarts/progress_echarts.vue";
import bottom_bar from "../../../components/Statisticsdata_echarts/bottom_bar.vue";
const dateValue_Select = ref("");
const timeValue_select = ref("");

const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
];

// table图表数据
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    serve: "10",
    sum: "50",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    serve: "10",
    sum: "50",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    serve: "10",
    sum: "50",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    serve: "10",
    sum: "50",
  },
];

onMounted(() => {
  let myChart = echarts.init(document.getElementById("main"));
  myChart.setOption({
    title: {
      text: "数据概况",
    },
    // 显示图例
    tooltip: {
      trigger: "axis",
    },
    color: ["#2984F8", "#3ED59F", "#FA746B"],
    // 图例名称
    legend: {
      data: ["居民数量", "签约量", "服务量"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "居民数量",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "签约量",
        type: "line",
        stack: "Total",
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "服务量",
        type: "line",
        stack: "Total",
        data: [150, 232, 201, 154, 190, 330, 410],
      },
    ],
  });
  window.onresize = function () {
    myChart.resize();
  };
});
</script>
  
  <style lang="scss" scoped>
.nation {
  background-color: #fbfbfb;
  .nation_top {
    margin-bottom: 40px;
  }
  .nation_out {
    text-align: right;
  }

  //   三个环形图
  .nation_huan {
    margin-top: 40px;
    // background-color: pink;
    height: 400px;
    ul {
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        list-style: none;
        // background-color: yellow;
        background-color: #fff;
        border: 1px solid #f2f2f2;
        height: 360px;
        width: 30%;
      }
    }
  }
  //   最底部两个图表
  .nation_two {
    margin-top: 40px;
    display: flex;
    // background-color: rgb(187, 132, 141);
    height: 400px;
    padding: 20px;
    .two_left {
      width: 30%;
      //   background-color: aqua;
      background-color: #fff;
      border: 1px solid #f2f2f2;
      margin-right: 5%;
    }
    .two_right {
      width: 67%;
      //   background-color: violet;
      background-color: #fff;
      border: 1px solid #f2f2f2;
    }
  }
}
</style>